<template>
  <div>
    <div style="margin-bottom:10px" v-if="cation_state == 0">
      <alert-box content="您的跑团未认证或认证已过期无法进行银行卡添加操作"></alert-box>
      <!-- <el-alert title="警告提示" type="error" description="您的跑团未认证或认证已过期无法进行银行卡添加操作" show-icon ></el-alert> -->
    </div>
    <div class="body-box">
      <window-title title="银行卡列表">
        <div class="add-btn-box">
          <el-button size="mini" type="text" icon="el-icon-plus" @click="addBank()">添加银行卡</el-button>
        </div>
      </window-title>
      <div class="table-box">
        <el-table size="mini" border :data="list.data">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="银行名称" prop="bank"></el-table-column>
          <el-table-column label="银行卡号" prop="no"></el-table-column>
          <el-table-column label="开户行" prop="address"></el-table-column>
          <el-table-column label="持卡人" prop="user_name"></el-table-column>
          <el-table-column label="手机号码" prop="mobile" width="100"></el-table-column>
          <el-table-column label="添加时间" prop="create_time" width="100"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="item">
              <el-button size="mini" icon="el-icon-delete" @click="deleteBank(item.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
      <!-- 银行模态框 -->
      <el-dialog :visible.sync="bank_model" title="提现银行" width="600px" :destroy-on-close="true">
        <el-form
          label-position="top"
          size="small"
          :model="bank_form"
          :rules="bank_rules"
          ref="bankform"
        >
          <el-form-item label="银行名称" prop="bank">
            <el-input placeholder="请输入银行名称" v-model="bank_form.bank"></el-input>
          </el-form-item>
          <el-form-item label="开户支行" prop="address">
            <el-input placeholder="请输入开户支行" v-model="bank_form.address"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="no">
            <el-input placeholder="请输入银行卡号" v-model="bank_form.no"></el-input>
          </el-form-item>
          <el-form-item label="开户人" prop="user_name">
            <el-input placeholder="请输入开户人" v-model="bank_form.user_name"></el-input>
            <span class="bank-badge">*保持与跑团认证时填写的法人或认证人一直</span>
          </el-form-item>
          <el-form-item label="预留手机" prop="mobile">
            <el-input placeholder="请输入银行预留手机号" v-model="bank_form.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="com-btn" @click="submitBank('bankform')">立即提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import alertBox from '../../components/unit/alert-box.vue';

export default {
  components: { windowTitle , alertBox },
  data() {
    return {
      list: {
        current_page: 1,
        data: []
      },
      bank_form: {
        bank: "",
        address: "",
        no: "",
        mobile: "",
        user_name: ""
      },
      bank_rules: {
        bank: [{ required: true, message: "请输入银行名称", trigger: "blur" }],
        address: [
          { required: true, message: "请输入开户支行", trigger: "blur" }
        ],
        no: [{ required: true, message: "请输入银行卡号", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" }
        ],
        user_name: [
          { required: true, message: "请输入开户人姓名", trigger: "blur" }
        ]
      },
      bank_model: false,
      cation: {},
      cation_state: 1
    };
  },
  mounted() {
    this.getData();
    this.getCation();
  },
  methods: {
    
    //获取认证信息
    getCation() {
      this.ajaxs("finance/getCationInfo", {
        success: res => {
          this.cation = res.msg;
          this.cation_state = 1;
          if (!res.code) this.cation_state = 0;
        }
      });
    },
    //添加银行
    addBank() {
      if (!this.cation_state)
        return this.toast(0, "跑团未认证或认证到期添加银行卡");
      this.bank_model = true;
    },
    //删除银行
    deleteBank(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("finance/bankDelete", {
            data: { id: id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getData();
              }
            }
          });
        })
        .catch(() => {});
    },
    //获取列表
    getData() {
      this.ajaxs("finance/bankList", {
        data: { page: this.list.current_page },
        success: res => {
          this.list = res.msg;
        }
      });
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      this.getData();
    },
    //验证开户人是否正确
    checkBankUser() {
      var user_name = "";
      switch (this.cation.cation_type) {
        case 1:
          user_name = this.cation.user_name;
          break;
        case 2:
          user_name = this.cation.company_name;
          break;
        case 3:
          user_name = this.cation.organize_name;
          break;
      }
      if (user_name != this.bank_form.user_name) return false;
      return true;
    },
    //设置银行信息
    submitBank(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.checkBankUser())
            return this.toast(0, "开户人与认证信息不一致");
          this.ajaxs("finance/setBankInfo", {
            data: this.bank_form,
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.bank_model = false;
                this.getData();
              }
            }
          });
        }
      });
    }
  }
};
</script>

<style>
.table-box {
  margin-top: 20px;
}
.add-btn-box {
  float: right;
}
</style>